Ajax ইন্সটলেশন এবং সেটআপ (Setting Up Ajax)

Web Development - অ্যাজাক্স (Ajax) - NCTB BOOK

Please, contribute to add content into Ajax ইন্সটলেশন এবং সেটআপ (Setting Up Ajax).

প্রথম Ajax প্রোগ্রাম তৈরি করা

Ajax প্রোগ্রাম তৈরি করার জন্য আপনাকে HTML, JavaScript এবং একটি সার্ভার রিসোর্স (যেমন একটি API বা একটি JSON ফাইল) প্রয়োজন হবে, যেখান থেকে আপনি ডেটা আনবেন। এখানে একটি সহজ Ajax প্রোগ্রামের উদাহরণ দেওয়া হলো, যা সার্ভার থেকে JSON ডেটা নিয়ে তা HTML এ দেখাবে।

প্রথম Ajax প্রোগ্রাম উদাহরণ:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Example</title>
</head>
<body>
    <h1>Ajax Data Load Example</h1>
    <button onclick="loadData()">Load Data</button>
    <div id="data-container"></div>

    <script src="app.js"></script>
</body>
</html>

ব্যাখ্যা:

এখানে একটি বেসিক HTML ফাইল তৈরি করা হয়েছে।
একটি button রয়েছে যা ক্লিক করার সময় loadData() ফাংশন কল করবে।
ডেটা প্রদর্শনের জন্য একটি <div> এলিমেন্ট রয়েছে যার আইডি data-container।
JavaScript কোডটি app.js ফাইলের মাধ্যমে যুক্ত করা হয়েছে।

JavaScript (app.js):

function loadData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // রিকোয়েস্ট ওপেন করা (GET মেথড, URL এবং অ্যাসিনক true)
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    
    // রেসপন্স রেডি হলে কি করবে তা নির্ধারণ করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // JSON ডেটা রিসিভ করা এবং প্রসেস করা
            var data = JSON.parse(xhr.responseText);
            
            // HTML এ ডেটা দেখানো
            document.getElementById("data-container").innerHTML = `
                <h2>${data.title}</h2>
                <p>${data.body}</p>
            `;
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

ব্যাখ্যা:

loadData() ফাংশন একটি Ajax রিকোয়েস্ট তৈরি করে এবং সার্ভারের URL https://jsonplaceholder.typicode.com/posts/1 থেকে JSON ডেটা রিসিভ করে।
xhr.open("GET", "URL", true); দিয়ে আমরা রিকোয়েস্ট ওপেন করেছি। "GET" মানে ডেটা আনতে চাই, "true" মানে এটি অ্যাসিনক্রোনাস হবে।
xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে আমরা চেক করেছি যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (readyState === 4) এবং সফল হয়েছে কিনা (status === 200)।
ডেটা রিসিভ হলে JSON ফরম্যাটে পার্স করে HTML ডকুমেন্টের data-container ডিভে সেই ডেটা দেখানো হয়েছে।

সার্ভার:

এখানে আমরা ডেমো API https://jsonplaceholder.typicode.com/posts/1 ব্যবহার করেছি, যা JSON ডেটা রিটার্ন করে। এই API ডেটা রিকোয়েস্ট করলে নিচের মতো ডেটা রিটার্ন করবে:

{
    "userId": 1,
    "id": 1,
    "title": "Sample Title",
    "body": "This is a sample body text."
}

প্রোগ্রামটি চালানোর ধাপ:

HTML ফাইলটি (index.html) আপনার ব্রাউজারে খুলুন।
"Load Data" বাটনে ক্লিক করুন।
সার্ভার থেকে ডেটা লোড হয়ে HTML ডিভে প্রদর্শিত হবে।

সারসংক্ষেপ:

এই প্রোগ্রামে, আমরা একটি বেসিক Ajax রিকোয়েস্ট করেছি যা একটি API থেকে ডেটা এনে তা HTML পেজে দেখিয়েছি। এটি Ajax এর মাধ্যমে ডায়নামিক ডেটা লোড এবং UI আপডেট করার একটি সহজ উদাহরণ।

Content added By

Md. Nasir Uddin (Raju)

HTML এবং JavaScript এর সাথে Ajax সংযোগ

HTML এবং JavaScript এর সাথে Ajax সংযোগ করার জন্য আমরা JavaScript ব্যবহার করে XMLHttpRequest অবজেক্টের মাধ্যমে একটি রিকোয়েস্ট পাঠাই এবং HTML ডকুমেন্টে সেই ডেটা ডায়নামিকভাবে আপডেট করি। Ajax এর মাধ্যমে এই সংযোগের প্রক্রিয়াটি খুবই গুরুত্বপূর্ণ, কারণ এটি ওয়েব পেজকে ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে। নিচে HTML এবং JavaScript এর সাথে Ajax সংযোগের একটি পূর্ণাঙ্গ উদাহরণ দেওয়া হলো:

উদাহরণ প্রোগ্রাম: HTML এবং JavaScript এর সাথে Ajax সংযোগ

১. HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Example</title>
</head>
<body>
    <h1>Ajax Data Load Example</h1>
    <button onclick="fetchData()">Load Data</button>
    <div id="result"></div>

    <script src="app.js"></script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

এখানে একটি HTML ফাইল তৈরি করা হয়েছে যেখানে একটি শিরোনাম (<h1>) এবং একটি বোতাম (<button>) আছে।
button এ onclick ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে, যা বোতামটি ক্লিক করলে fetchData() ফাংশন কল করবে।
result নামে একটি <div> এলিমেন্ট রয়েছে যেখানে আমরা Ajax থেকে প্রাপ্ত ডেটা ডায়নামিকভাবে দেখাব।
JavaScript কোড app.js ফাইলে রয়েছে, যা HTML এর শেষে যুক্ত করা হয়েছে।

২. JavaScript (app.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // রিকোয়েস্ট ওপেন করা (GET মেথড, URL এবং অ্যাসিনক)
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    
    // রেসপন্স প্রস্তুত হলে কি করবে তা নির্ধারণ করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // JSON ডেটা রিসিভ করা এবং প্রসেস করা
            var data = JSON.parse(xhr.responseText);
            
            // HTML ডকুমেন্টে ডেটা আপডেট করা
            document.getElementById("result").innerHTML = `
                <h2>${data.title}</h2>
                <p>${data.body}</p>
            `;
        } else if (xhr.readyState === 4 && xhr.status !== 200) {
            // এরর মেসেজ দেখানো যদি রিকোয়েস্ট ব্যর্থ হয়
            document.getElementById("result").innerHTML = "Error loading data!";
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

বিস্তারিত ব্যাখ্যা:

১. XMLHttpRequest অবজেক্ট তৈরি:

fetchData() ফাংশনটি প্রথমে একটি XMLHttpRequest অবজেক্ট তৈরি করে, যা Ajax রিকোয়েস্ট পরিচালনা করার জন্য ব্যবহৃত হয়।

২. রিকোয়েস্ট সেটআপ করা:

xhr.open("GET", "URL", true) দিয়ে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে, যা সার্ভারের URL থেকে ডেটা আনবে। "true" মানে রিকোয়েস্টটি অ্যাসিনক্রোনাস হবে।

৩. onreadystatechange ইভেন্ট:

xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে আমরা রিকোয়েস্টের অবস্থা চেক করেছি।
যদি xhr.readyState === 4 (যখন রিকোয়েস্ট সম্পূর্ণ) এবং xhr.status === 200 (যখন রিকোয়েস্ট সফল), তখন JSON ডেটা প্রসেস করে HTML ডিভে (result) আপডেট করা হয়েছে।
যদি কোনো কারণে রিকোয়েস্ট ব্যর্থ হয় (যেমন xhr.status ২০০ না হয়), তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

৪. রিকোয়েস্ট পাঠানো:

xhr.send(); দিয়ে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।

৩. সার্ভার রেসপন্স:

এই উদাহরণে আমরা একটি ডেমো API (https://jsonplaceholder.typicode.com/posts/1) ব্যবহার করেছি, যা নিচের মতো JSON ডেটা প্রদান করে:

{
    "userId": 1,
    "id": 1,
    "title": "Sample Title",
    "body": "This is a sample body text."
}

৪. প্রোগ্রামটি কীভাবে কাজ করে:

যখন ইউজার "Load Data" বোতামটি ক্লিক করে, তখন fetchData() ফাংশন কল হয়।
ফাংশনটি সার্ভারে Ajax রিকোয়েস্ট পাঠায় এবং JSON ডেটা রিসিভ করে।
রিসিভ করা ডেটা HTML ডিভ (result) এ আপডেট করা হয়, ফলে ইউজার নতুন ডেটা দেখতে পারে পেজ রিলোড না করেই।

সারসংক্ষেপ:

এই প্রোগ্রামে HTML, JavaScript, এবং Ajax এর মধ্যে সংযোগ দেখানো হয়েছে। XMLHttpRequest অবজেক্টের মাধ্যমে Ajax রিকোয়েস্ট করা হয়েছে, এবং প্রাপ্ত ডেটা HTML ডকুমেন্টে ইনজেক্ট করা হয়েছে। এটি একটি বেসিক কিন্তু গুরুত্বপূর্ণ পদ্ধতি, যা ডায়নামিক ওয়েব অ্যাপ্লিকেশন তৈরিতে ব্যবহৃত হয়।

Content added By

Md. Nasir Uddin (Raju)

Ajax এর মাধ্যমে Server থেকে Data Fetching

Ajax এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করা হলো ওয়েব ডেভেলপমেন্টের একটি সাধারণ এবং গুরুত্বপূর্ণ প্রক্রিয়া। এই প্রক্রিয়ায় JavaScript ব্যবহার করে, সার্ভারের সাথে যোগাযোগ করা হয় এবং ডেটা রিসিভ করা হয়, যা পেজ রিলোড না করেই HTML ডকুমেন্টে আপডেট করা যায়। নিচে একটি উদাহরণসহ Ajax এর মাধ্যমে ডেটা ফেচ করার ধাপগুলি এবং তা কিভাবে কার্যকর করা যায়, তা ব্যাখ্যা করা হলো।

উদাহরণ: Ajax এর মাধ্যমে Server থেকে Data Fetch করা

১. HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Data Fetch Example</title>
</head>
<body>
    <h1>Fetch Data Using Ajax</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- ফেচ করা ডেটা এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

একটি HTML ফাইল তৈরি করা হয়েছে যেখানে একটি শিরোনাম (<h1>) এবং একটি বোতাম (<button>) রয়েছে।
বোতামটিতে একটি onclick ইভেন্ট হ্যান্ডলার রয়েছে, যা বোতাম ক্লিক করার সময় fetchData() ফাংশন কল করবে।
data-container নামে একটি <div> রয়েছে যেখানে Ajax এর মাধ্যমে ফেচ করা ডেটা ডায়নামিকভাবে দেখানো হবে।

২. JavaScript (app.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // রিকোয়েস্ট ওপেন করা (GET মেথড, URL এবং অ্যাসিনক)
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    
    // রেসপন্স প্রস্তুত হলে কি করবে তা নির্ধারণ করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ
            if (xhr.status === 200) { // সফলভাবে ডেটা পাওয়া গেছে
                var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
                
                // HTML ডকুমেন্টে ডেটা দেখানো
                document.getElementById("data-container").innerHTML = `
                    <h2>${data.title}</h2>
                    <p>${data.body}</p>
                `;
            } else {
                // যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
                document.getElementById("data-container").innerHTML = "Error fetching data!";
            }
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

বিস্তারিত ব্যাখ্যা:

XMLHttpRequest অবজেক্ট তৈরি:
- fetchData() ফাংশনের মধ্যে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করতে ব্যবহৃত হয়।
রিকোয়েস্ট সেটআপ করা:
- xhr.open("GET", "URL", true) মেথড ব্যবহার করে আমরা একটি GET রিকোয়েস্ট সেটআপ করেছি, যা সার্ভারের URL থেকে ডেটা আনবে। "true" মানে এটি অ্যাসিনক্রোনাস পদ্ধতিতে কাজ করবে।
onreadystatechange ইভেন্ট:
- xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্টের অবস্থা চেক করা হয়েছে।
- যদি xhr.readyState === 4 (রিকোয়েস্ট সম্পূর্ণ) এবং xhr.status === 200 (রিকোয়েস্ট সফল) হয়, তখন JSON ডেটা প্রসেস করে HTML ডকুমেন্টের data-container ডিভে আপডেট করা হয়েছে।
- অন্যথায়, যদি কোনো এরর হয়, তবে একটি এরর মেসেজ দেখানো হয়েছে।
রিকোয়েস্ট পাঠানো:
- xhr.send(); মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।

৩. সার্ভার রেসপন্স:

এই উদাহরণে আমরা একটি ডেমো API (https://jsonplaceholder.typicode.com/posts/1) ব্যবহার করেছি, যা নিচের মতো JSON ডেটা রিটার্ন করে:

{
    "userId": 1,
    "id": 1,
    "title": "Sample Title",
    "body": "This is a sample body text."
}

প্রোগ্রামটি কীভাবে কাজ করে:

যখন ইউজার "Fetch Data" বোতামটি ক্লিক করে, তখন fetchData() ফাংশন কল হয়।
ফাংশনটি একটি Ajax রিকোয়েস্ট পাঠায় এবং সার্ভার থেকে JSON ডেটা রিসিভ করে।
ডেটা রিসিভ হলে, তা HTML ডিভ (data-container) এ আপডেট করা হয়, ফলে ইউজার সেই ডেটা দেখতে পারে পেজ রিলোড না করেই।

সারসংক্ষেপ:

Ajax এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করতে আমরা XMLHttpRequest অবজেক্ট ব্যবহার করি এবং ডেটা পাওয়ার পর JavaScript এর মাধ্যমে HTML আপডেট করি। এটি ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করার একটি বেসিক কিন্তু কার্যকর পদ্ধতি।

Content added By

Md. Nasir Uddin (Raju)

Ajax এর জন্য Development Environment সেটআপ করা

Ajax এর জন্য একটি ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করা খুবই সহজ এবং এটি আপনার সিস্টেমে কিছু বেসিক টুলস এবং সেটিংসের মাধ্যমে করা যায়। Ajax প্রোগ্রাম তৈরি করার জন্য একটি ওয়েব সার্ভার, একটি টেক্সট এডিটর, এবং একটি ব্রাউজার প্রয়োজন। নিচে একটি স্টেপ-বাই-স্টেপ গাইড দেওয়া হলো, যা অনুসরণ করে আপনি আপনার Ajax ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করতে পারবেন।

১. টেক্সট এডিটর ইনস্টল করা

Ajax প্রোগ্রাম লিখতে আপনাকে একটি টেক্সট এডিটর দরকার হবে, যা কোড লিখতে এবং সেভ করতে ব্যবহার করা যায়। জনপ্রিয় কিছু টেক্সট এডিটর হলো:

Visual Studio Code (VS Code): এটি একটি ওপেন-সোর্স এবং ফ্রি কোড এডিটর, যা HTML, CSS, এবং JavaScript এর জন্য বিশেষভাবে উপযুক্ত।
Sublime Text: একটি লাইটওয়েট এডিটর যা খুব দ্রুত কাজ করে।
Atom: GitHub দ্বারা তৈরি করা একটি ওপেন-সোর্স টেক্সট এডিটর।

এডিটরের যেকোনো একটি ডাউনলোড ও ইনস্টল করে নিন।

২. ওয়েব ব্রাউজার

Ajax প্রোগ্রাম ডেভেলপ ও টেস্ট করার জন্য একটি আধুনিক ওয়েব ব্রাউজার প্রয়োজন। Chrome, Firefox, Safari, বা Edge এর মতো যে কোনো আধুনিক ব্রাউজার ব্যবহার করতে পারেন।

Chrome এবং Firefox সবচেয়ে বেশি ব্যবহৃত হয়, কারণ এগুলোর ডেভেলপার টুলস খুবই শক্তিশালী এবং Ajax রিকোয়েস্ট ডিবাগিংয়ে সাহায্য করে।

৩. একটি ওয়েব সার্ভার সেটআপ করা

Ajax ডেভেলপমেন্টের জন্য একটি ওয়েব সার্ভার প্রয়োজন, কারণ Ajax রিকোয়েস্ট সিকিউরিটি রুলের কারণে লোকাল ফাইল সিস্টেম থেকে কাজ করে না। ওয়েব সার্ভার সেটআপ করার কয়েকটি সহজ পদ্ধতি নিচে দেওয়া হলো:

a. Live Server (VS Code Extension)

যদি আপনি Visual Studio Code ব্যবহার করেন, তাহলে Live Server নামের একটি এক্সটেনশন ইনস্টল করতে পারেন।
এটি ইনস্টল করার পর, আপনার HTML ফাইলটি খুলুন এবং "Go Live" বোতামে ক্লিক করুন। এটি আপনার HTML ফাইলকে একটি লোকাল সার্ভারে চালু করবে।
আপনি এরপর আপনার ব্রাউজারে http://localhost:5500 (বা অন্য যে কোনো লোকাল URL) এ অ্যাক্সেস করতে পারবেন।

b. Node.js এবং http-server

Node.js ইনস্টল করে নিন (https://nodejs.org থেকে)।
Node.js ইনস্টল হলে, একটি টার্মিনাল বা কমান্ড প্রম্পট খুলুন এবং নিচের কমান্ডটি টাইপ করুন:

npm install -g http-server

এরপর, আপনার প্রোজেক্ট ডিরেক্টরিতে নেভিগেট করুন এবং নিচের কমান্ডটি রান করুন:

http-server

এটি আপনার প্রোজেক্টকে http://localhost:8080 এ চালু করবে, যেখানে আপনি আপনার Ajax প্রোগ্রাম টেস্ট করতে পারবেন।

৪. একটি বেসিক ফোল্ডার স্ট্রাকচার তৈরি করা

আপনার প্রোজেক্ট ডিরেক্টরিতে একটি ফোল্ডার তৈরি করুন, যেমন ajax-project। এরপর সেখানে নিচের ফাইলগুলো তৈরি করুন:

index.html: আপনার HTML ফাইল, যেখানে আপনার UI এবং Ajax স্ক্রিপ্ট লোড হবে।
app.js: আপনার JavaScript ফাইল, যেখানে Ajax কোড থাকবে।
style.css (ঐচ্ছিক): আপনার CSS ফাইল, যেখানে আপনার পেজের স্টাইল থাকবে।

৫. index.html ফাইল তৈরি করা

index.html ফাইলটি নিচের মতো হতে পারে:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Development Setup</title>
</head>
<body>
    <h1>Ajax Development Environment</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container"></div>

    <!-- JavaScript ফাইল যুক্ত করা -->
    <script src="app.js"></script>
</body>
</html>

৬. app.js ফাইল তৈরি করা

app.js ফাইলে একটি বেসিক Ajax ফাংশন লিখুন:

function fetchData() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            document.getElementById("data-container").innerHTML = `
                <h2>${data.title}</h2>
                <p>${data.body}</p>
            `;
        }
    };
    xhr.send();
}

৭. প্রোগ্রামটি চালানো এবং টেস্ট করা

আপনার টার্মিনালে গিয়ে লোকাল সার্ভার চালু করুন (যেমন: http-server বা VS Code এর Live Server থেকে)।
ব্রাউজারে গিয়ে http://localhost:8080 (অথবা আপনার সার্ভারের লোকাল URL) খুলুন।
"Fetch Data" বোতামে ক্লিক করুন এবং দেখুন যে সার্ভার থেকে ডেটা লোড হয়ে HTML পেজে আপডেট হচ্ছে।

সারসংক্ষেপ:

Ajax এর জন্য ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করতে টেক্সট এডিটর, একটি ওয়েব ব্রাউজার, এবং একটি লোকাল ওয়েব সার্ভার প্রয়োজন। এই টুলগুলোর মাধ্যমে আপনি সহজেই Ajax প্রোগ্রাম তৈরি, ডিবাগ, এবং টেস্ট করতে পারবেন।

Content added By

Md. Nasir Uddin (Raju)

আরও দেখুন...

Ajax ইন্সটলেশন এবং সেটআপ (Setting Up Ajax) প্রথম Ajax প্রোগ্রাম তৈরি করা HTML এবং JavaScript এর সাথে Ajax সংযোগ Ajax এর মাধ্যমে Server থেকে Data Fetching Ajax এর জন্য Development Environment সেটআপ করা

Ajax ইন্সটলেশন এবং সেটআপ (Setting Up Ajax)

প্রথম Ajax প্রোগ্রাম তৈরি করা

প্রথম Ajax প্রোগ্রাম উদাহরণ:

HTML (index.html):

JavaScript (app.js):

সার্ভার:

প্রোগ্রামটি চালানোর ধাপ:

সারসংক্ষেপ:

HTML এবং JavaScript এর সাথে Ajax সংযোগ

উদাহরণ প্রোগ্রাম: HTML এবং JavaScript এর সাথে Ajax সংযোগ

১. HTML (index.html):

২. JavaScript (app.js):

৩. সার্ভার রেসপন্স:

৪. প্রোগ্রামটি কীভাবে কাজ করে:

সারসংক্ষেপ:

Ajax এর মাধ্যমে Server থেকে Data Fetching

উদাহরণ: Ajax এর মাধ্যমে Server থেকে Data Fetch করা

১. HTML (index.html):

২. JavaScript (app.js):

৩. সার্ভার রেসপন্স:

প্রোগ্রামটি কীভাবে কাজ করে:

সারসংক্ষেপ:

Ajax এর জন্য Development Environment সেটআপ করা

১. টেক্সট এডিটর ইনস্টল করা

২. ওয়েব ব্রাউজার

৩. একটি ওয়েব সার্ভার সেটআপ করা

a. Live Server (VS Code Extension)

b. Node.js এবং http-server

৪. একটি বেসিক ফোল্ডার স্ট্রাকচার তৈরি করা

৫. index.html ফাইল তৈরি করা

৬. app.js ফাইল তৈরি করা

৭. প্রোগ্রামটি চালানো এবং টেস্ট করা

সারসংক্ষেপ:

All Notifications

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Promotion